<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_表单练习</title>
</head>
<body>
    <!-- form表示在整个表单 action属性用于提交表单手机的数据 #占位符，暂时提交本页-->
    <!-- input是表单的输入控件 name控制控件的名字，没有name的控件无法提交值
         value：默认存在，用来保护用户在控件中输入的值，也可以设置输入框的默认值与按钮上显示的文字
         readonly：只读，用户无法修改，但是可以提交值
         disabled：禁用，用户无法修改，但是可以提交值
         placeholder：提示文本占位符
         -->
    <!-- type属性控制控件的类型
       text普通文本输入框 password密码框 radio单选框 checkbox多选框 file上传文件 date日期 color颜色 range范围
       submit提交按钮  reset重置按钮（恢复所有控件的初始状态）button普通按钮-->
  <form action="#">
      姓名1：<input type="text" name="uname1"> <br>
      姓名2：<input type="text" name="uname2" placeholder="请填写名字"> <br>
      姓名3：<input type="text" name="uname3" value="阿西吧"> <br>
      姓名4：<input type="text" name="uname4" value="阿西吧" readonly> <br>
      姓名5：<input type="text" name="uname5" value="阿西吧" disabled> <br>
      密码：<input type="password" name="upwd" placeholder="请填写密码" maxlength="6"> <br>
      性别：
      <input type="radio" name="gender" value="1" checked>武装直升机
      <input type="radio" name="gender" value="2">沃尔玛塑料袋
      <br>
      爱好：
      <input type="checkbox" name="like" value="cy" checked>抽烟
      <input type="checkbox" name="like" value="hj" >喝酒
      <input type="checkbox" name="like" value="tt" checked>烫头
      <input type="checkbox" name="like" value="java">学Java
      <br>
      <!--  关联效果1：点击文字即可选中复选框   -->
      <input type="checkbox" id="yes">
      <label for="yes">我同意以上协议</label>
      <br>
      <!--  关联效果2：点击文字让输入框获得输入焦点Ⅰ     -->
      <label for="ok">昵称</label>
      <input type="text" id="ok">
      <!--H5新增的一些表单控件      -->
      幸运色:<input type="color" name="lc"><br>
      缩放:<input type="range" name="sf"><br>
      文件:<input type="file" name="wj"><br>
      生日:<input type="date" name="birthday"><br>
      喜欢的城市:
      <select name=""city>
          <option value="1">北京</option>
          <option value="2" >上海</option>
          <option value="3" >广州</option>
          <option value="4" >重庆</option>
          <option value="5" >西安</option>
      </select>
      留言板:
      <textarea name="msg" style="resize: none " rows="10" cols="30"></textarea>



      <input type="submit" value="点击我进行提交">
      <input type="reset" value="重置">
      <input type="button" value="普通按钮">
      <button>普通按钮</button>
  </form>
</body>
</html>